<template>
    <div class="house-panel-content" v-loading="loading">
        <el-card class="box-card" style="margin-top:12px;" shadow="never">
            <template #header>
                <div class="card-header">
                    基本信息
                </div>
            </template>
            <el-form :model="formData" ref="ruleFormRef" :rules="rules" label-width="120px">
                <el-row>
                    <el-col :span="8">
                        <div class="line-form">
                            <div class="line-form-title"><label class="label-required">姓名：</label></div>
                            <div class="line-form-content">
                                <el-form-item label-width="0">
                                    <el-input v-model="formData.name">
                                    </el-input>
                                </el-form-item>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="line-form">
                            <div class="line-form-title"><label class="label-required">证件号码：</label></div>
                            <div class="line-form-content">
                                <el-form-item label-width="0" prop="idcard">
                                    <el-input v-model="formData.idcard" @blur="onIdCardBlur" placeholder="请输入证件号码">
                                    </el-input>
                                </el-form-item>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="line-form">
                            <div class="line-form-title"><label class="label-required">人口类别：</label></div>
                            <div class="line-form-content">
                                <el-form-item label-width="0" prop="category">
                                    <el-select v-model="formData.category" class="m-2" placeholder="请选择人口类别">
                                        <el-option v-for="item in Dict.getList('category')" :key="item.value"
                                            :label="item.label" :value="item.value" />
                                    </el-select>
                                </el-form-item>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="line-form">
                            <div class="line-form-title"><label class="label-required">证件类型：</label></div>
                            <div class="line-form-content">
                                <el-form-item label-width="0" prop="cardType">
                                    <el-select v-model="formData.cardType" class="m-2" placeholder="请选择证件类型">
                                        <el-option v-for="item in Dict.getList('cardType')" :key="item.value"
                                            :label="item.label" :value="item.value" />
                                    </el-select>
                                </el-form-item>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="line-form">
                            <div class="line-form-title"><label class="label-required">民族：</label></div>
                            <div class="line-form-content">
                                <el-form-item label-width="0" prop="nation">
                                    <el-select v-model="formData.nation" filterable class="m-2" placeholder="请选择民族信息">
                                        <el-option v-for="item in Dict.getList('nation')" :key="item.value" :label="item.label"
                                            :value="item.value" />
                                    </el-select>
                                </el-form-item>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="line-form">
                            <div class="line-form-title"><label class="label-required">文化程度：</label></div>
                            <div class="line-form-content">
                                <el-form-item label-width="0" prop="education">
                                    <el-select v-model="formData.education" class="m-2" placeholder="请选择文化程度">
                                        <el-option v-for="item in Dict.getList('education')" :key="item.value"
                                            :label="item.label" :value="item.value" />
                                    </el-select>
                                </el-form-item>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="line-form">
                            <div class="line-form-title">婚姻状况：</div>
                            <div class="line-form-content">
                                <el-form-item label-width="0" prop="marriage">
                                    <el-select v-model="formData.marriage" class="m-2" placeholder="请选择婚姻状况">
                                        <el-option v-for="item in Dict.getList('marriage')" :key="item.value"
                                            :label="item.label" :value="item.value" />
                                    </el-select>
                                </el-form-item>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="line-form">
                            <div class="line-form-title">政治面貌：</div>
                            <div class="line-form-content">
                                <el-form-item label-width="0" prop="political">
                                    <el-select v-model="formData.political" class="m-2" placeholder="请选择政治面貌">
                                        <el-option v-for="item in Dict.getList('political')" :key="item.value"
                                            :label="item.label" :value="item.value" />
                                    </el-select>
                                </el-form-item>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="line-form">
                            <div class="line-form-title">宗教信仰：</div>
                            <div class="line-form-content">
                                <el-form-item label-width="0" prop="religion">
                                    <el-select v-model="formData.religion" class="m-2" placeholder="请选择宗教信仰">
                                        <el-option v-for="item in Dict.getList('religion')" :key="item.value"
                                            :label="item.label" :value="item.value" />
                                    </el-select>
                                </el-form-item>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="line-form">
                            <div class="line-form-title">兵役状态：</div>
                            <div class="line-form-content">
                                <el-form-item label-width="0" prop="military">
                                    <el-select v-model="formData.military" class="m-2" placeholder="请选择兵役状态">
                                        <el-option v-for="item in Dict.getList('military')" :key="item.value"
                                            :label="item.label" :value="item.value" />
                                    </el-select>
                                </el-form-item>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="16">
                        <div class="line-form">
                            <div class="line-form-title">户籍地址：</div>
                            <div class="line-form-content">
                                <el-form-item label-width="0" prop="registeredAddress">
                                    <el-input v-model="formData.registeredAddress"></el-input>
                                </el-form-item>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="24">
                        <div class="line-form">
                            <div class="line-form-title">备注：</div>
                            <div class="line-form-content">
                                <el-form-item label-width="0">
                                    <el-input v-model="formData.bz" :rows="2" type="textarea" placeholder="请输入备注信息" />
                                </el-form-item>
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </el-form>
        </el-card>

        <el-card class="box-card" style="margin-top:12px;" shadow="never">
            <template #header>
                <div class="card-header">
                    通讯资料信息 <el-button type="primary" @click="addContact" :icon="Plus" size="small">新增联系方式</el-button>
                </div>
            </template>
            <el-row v-if="contactList.length > 0">
                <el-col :span="8" v-for="(contact, index) in contactList" :key="contact.id">
                    <div class="line-form" style="padding:8px;">
                        <el-select v-model="contact.contactType" class="lxfs-box">
                            <el-option v-for="item in Dict.getList('contact')" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                        <el-form-item label-width="0">
                            <el-input v-model="contact.contact" />
                        </el-form-item>
                        <!-- <el-button type="primary">编辑</el-button> -->
                        <el-button type="danger" @click="deleteContact(contact.id, index)">删除</el-button>
                    </div>
                </el-col>
            </el-row>
            <el-empty v-else description="暂无联系方式" :image-size="60" />
        </el-card>
    </div>
    <div class="house-panel-footer">
        <el-button type="primary" :icon="Plus" @click="onSubmit">保存</el-button>
    </div>
    <ContactFormDialog ref="contactFormDialogRef" />
</template>

<script setup lang="ts" name="HouseInfo">
import { ref, reactive, onMounted, watch } from 'vue'
import { dialogProps, ElMessage, ElMessageBox, FormInstance, FormRules } from 'element-plus';
import { Delete, RefreshRight, Edit, Plus } from '@element-plus/icons-vue'
import { useHandleData } from "/@/hooks/useHandleData";
import * as api from '/@/api/person/personInfo'
import * as contactApi from '/@/api/person/contact'
import ContactFormDialog from './ContactFormDialog/index.vue'
import { Dict } from "/@/utils/storage";
import rulesObj from './rules';

const props = defineProps({
    currentNode: {
        type: Object,
        default: () => { }
    }
})

const personId = ref(''), loading = ref<boolean>(true)

//验证规则
const rules = reactive<FormRules>(rulesObj);
//房屋表单
const formData = reactive<any>({
    id: '',
	name: '',
	idcard: '',
	category: '',
	cardType: '',
	nation: '',
	contact: '',
	avatar: '',
	birth: '',
	education: '',
	marriage: '',
	political: '',
	religion: '',
	military: '',
	dataStatus: 1,
	registeredAddress: '',
})

const onIdCardBlur = () => {
	if(formData.idcard) {
		if(formData.idcard.length === 15 || formData.idcard.length === 18) {
			formData.cardType = '01'
		}
		let nativePlaceCode = Number(formData.idcard.substring(0, 6));
		let shiCode = nativePlaceCode / 100;
		if(shiCode === 5201) {
			formData.category = '01';
		}
	}
}


const formDataHistory = reactive<any>({})

const contactList = ref<any>([])

const ruleFormRef = ref<FormInstance>();

const contactFormDialogRef = ref();

/**
 * 添加成功回调
 */
const addContactSuccess = (params: any) => {
    console.log(params)
    contactList.value.push(params)
}

/**
 * 新增联系方式
 */
const addContact = () => {
    const rowData = {
        title: '新增联系方式',
        rowData: {
            personId: personId.value,
            contactType: '01'
        },
        callback: addContactSuccess,
        apiUrl: contactApi.add
    }
    contactFormDialogRef.value!.acceptParams(rowData)
}

/**
 * 删除联系方式
 * @param id 联系方式ID
 */
const deleteContact = async (id: string, index: any) => {
    const res: any = await useHandleData(contactApi.remove, { id }, '删除联系方式');
    (res && res.code === 0) && contactList.value.splice(index, 1)
}


//组件加载完后执行，在这里请求数据
onMounted(async () => {
    const { id } = props.currentNode
    personId.value = id;
    getData(id)
    getContact(id)
})

/**
 * 获取人口详情
 * @param id 人员ID
 */
const getData = async (id: string) => {
    const { data } = await api.detail({ id })
    if (data) {
        for (let key in formData) {
            formData[key] = data[key]
            formDataHistory[key] = data[key]
        }
    }
    loading.value = false
}
/**
 * 获取人员联系方式
 * @param id 人员ID
 */
const getContact = async (id: string) => {
    const { data } = await contactApi.getList({ personId: id })
    if (data) {
        contactList.value = data
    }
    loading.value = false
}


//提交表单
const onSubmit = () => {
    ruleFormRef.value!.validate((valid) => {
        if (!valid) return;
        let submitData = formData//需要提交的表单
        let title = '新增';
        if (formData.id) {
            title = '修改'
            submitData = {}
            for (let key in formData) {
                var value = formData[key]
                if (formDataHistory[key] != value) {
                    submitData[key] = value
                    formDataHistory[key] = value
                }
            }
            if (Object.keys(submitData).length === 0) {
                ElMessage.error('未做任何修改，不能进行提交')
                return
            }
            submitData.id = formData.id
        }
        useHandleData(formData.id ? api.edit : api.add, submitData, `${title}人员`);
    });
}

</script>

<style lang="scss" scoped>
:deep(.el-card__body) {
    padding: 12px;
}

.lxfs-box {
    width: 190px;
    margin-right: 10px;
}

:deep(.el-form-item) {
    margin-bottom: 0px !important;
}

:deep(.el-form-item) {
    width: 100%;
    padding-right: 6px;
}

:deep(.el-card__header) {
    padding: 10px 18px;
}

.house-panel-content {
    padding: 12px;
    overflow-y: auto;
    flex: 1 1 auto;
    height: 0;
    flex-direction: column;
}

.house-panel-footer {
    display: flex;
    width: 100%;
    height: 45px;
    border-top: 1px solid #efefef;
    background-color: #fff;
    justify-content: center;
    align-items: center;
}
</style>